<template>
	<div class="content-box user-detail-wrapper" v-loading="loading">
		<div class="el-form-sub-title flex-between mb40">
			<span>订单信息</span>
			<div>
				<el-button type="primary" plain v-auth="'order:push:invoke'" v-show="orderInfo?.pushStatus == 0" @click="onPush">推送履约</el-button>
				<el-button type="primary" plain v-auth="'order:cancel:invoke'" v-show="orderInfo?.orderStatus == 0" @click="cancelOrder">取消订单</el-button>
				<!-- <el-button
					type="primary"
					plain
					v-show="orderInfo?.orderStatus != 0 && orderInfo?.orderStatus != 4 && orderInfo?.orderType != 4"
					v-auth="'order:part-refund:invoke'"
					@click="onRefundPart"
					>部分退款</el-button
				> -->
				<el-button type="primary" plain v-auth="'order:seller-remark:invoke'" @click="onRemark">商家备注</el-button>
				<!-- <el-button
					type="primary"
					v-show="[0, 1].includes(orderInfo?.orderType) && orderInfo?.orderStatus == 0"
					plain
					v-auth="'order:change-price:invoke'"
					@click="onChangePrice"
					>订单改价</el-button
				> -->
				<el-button
					type="primary"
					v-show="
						(orderInfo?.orderType == 0 && orderInfo?.orderStatus == 1 && orderInfo?.pushStatus == 1) ||
						(orderInfo?.orderType == 3 && orderInfo?.orderStatus == 1) ||
						(orderInfo.orderStatus == 2 && orderInfo.partlySend == 1)
					"
					plain
					v-auth="'order:send:invoke'"
					@click="onShipments"
					>订单发货</el-button
				>
				<el-button type="primary" v-show="orderInfo.orderStatus == 2" plain v-auth="'order:send:invoke'" @click="onShipments(true)"
					>修改发货</el-button
				>
			</div>
		</div>
		<el-steps class="mb24" align-center style="max-width: 80%; margin: auto" :active="orderInfo.step">
			<el-step
				v-for="(item, index) in orderTypeStep[orderInfo.orderType]"
				:key="item.index"
				:title="item.title"
				:icon="index < orderInfo.step ? 'SuccessFilled' : false"
				:description="orderInfo[item.time] || ''"
			/>
		</el-steps>
		<el-row class="row-bg mb40">
			<el-col :span="8"><span style="color: #888">订单编号：</span>{{ orderInfo.orderNo }}</el-col>
			<el-col :span="8"><span style="color: #888">订单类型：</span>{{ constant.ORDERTYPE[orderInfo.orderType] }}</el-col>
			<el-col :span="8"
				><span style="color: #888">订单状态：</span
				>{{ orderInfo.orderStatus == 2 && orderInfo.partlySend == 1 ? '部分发货' : constant.ORDERSTATUS[orderInfo.orderStatus] }}</el-col
			>
			<el-col :span="8" class="mt10"><span style="color: #888">SAP订单号：</span>{{ orderInfo.sapOrderNo }}</el-col>
		</el-row>
		<!-- 支付信息： 酒藏提货订单不展示 -->
		<template v-if="orderInfo.orderType != 3">
			<div class="el-form-sub-title">支付信息</div>
			<el-row class="row-bg">
				<el-col :span="8"><span style="color: #888">支付方式：</span>{{ constant.APPTYPE[orderInfo?.trade?.appType] }}</el-col>
				<el-col :span="8"><span style="color: #888">交易号：</span>{{ orderInfo?.trade?.tradeNo }}</el-col>
			</el-row>
			<el-divider />
		</template>
		<div class="el-form-sub-title">买家信息</div>
		<el-row class="row-bg">
			<el-col :span="8" class="flex-center">
				<span style="color: #888">买家昵称：</span>
				<el-image style="width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0" :src="orderInfo?.consignee?.avatar || default_photo" />
				<span class="color-primary ml8 mr8 font14 pointer" @click="$router.push(`/user/detail/${orderInfo?.consignee?.id}`)">{{
					orderInfo?.consignee?.nickName || '-'
				}}</span>
				<el-tag :type="orderInfo?.consignee?.userType ? 'primary' : 'success'">
					{{ constant.USERTYPE[orderInfo?.consignee?.userType] }}
				</el-tag>
			</el-col>
			<el-col :span="8" class="flex-center">
				<span style="color: #888">手机号：</span>
				<ciphertext :ciphertext="encryptPhoneNumber(orderInfo?.consignee?.mobile)" :realtext="orderInfo?.consignee?.mobile"></ciphertext>
			</el-col>
		</el-row>
		<el-divider />
		<!-- 卖家信息： c2c酒藏订单 展示 -->
		<template v-if="orderInfo.orderType == 2">
			<div class="el-form-sub-title">卖家信息</div>
			<el-row class="row-bg">
				<el-col :span="8" class="flex-center">
					<span style="color: #888">卖家昵称：</span>
					<el-image style="width: 32px; height: 32px; border-radius: 50%" :src="orderInfo?.seller?.avatar || default_photo" preview-teleported />
					<span class="color-primary ml8 mr8 font14">{{ orderInfo?.seller?.nickName || '-' }}</span>
					<el-tag :type="orderInfo?.seller?.userType ? 'primary' : 'success'">
						{{ constant.USERTYPE[orderInfo?.seller?.userType] }}
					</el-tag>
				</el-col>
				<el-col :span="8" class="flex-center">
					<span style="color: #888">手机号：</span>
					<ciphertext :ciphertext="encryptPhoneNumber(orderInfo?.seller?.mobile)" :realtext="orderInfo?.seller?.mobile"></ciphertext>
				</el-col>
			</el-row>
			<el-divider />
		</template>
		<!-- 收货与物流信息： b2c实物订单、酒藏提货订单 展示 -->
		<template v-if="[0, 3].includes(orderInfo.orderType)">
			<div class="el-form-sub-title">收货与物流信息</div>
			<el-row class="row-bg">
				<el-col :span="8" class="flex-center">
					<span style="color: #888">收货地址：</span>
					<ciphertext
						:ciphertext="`${orderInfo?.express?.consigneeProvinceName}${orderInfo?.express?.consigneeCityName}${orderInfo?.express?.consigneeAreaName}******`"
						:realtext="`${orderInfo?.express?.consigneeProvinceName}${orderInfo?.express?.consigneeCityName}${orderInfo?.express?.consigneeAreaName}${orderInfo?.express?.consigneeAddress}`"
					></ciphertext>
				</el-col>
				<el-col :span="8"
					><span style="color: #888">收货人：</span>
					{{ orderInfo?.express?.consigneeName }}
				</el-col>
				<el-col :span="8" class="flex-center">
					<span style="color: #888">收货手机：</span>
					<span>
						{{ orderInfo?.express?.consigneePhone }}
					</span>
				</el-col>
			</el-row>
			<el-divider />
		</template>
		<!-- 商家备注： c2c酒藏订单 不展示 -->
		<template v-if="orderInfo.orderType != 2">
			<div class="el-form-sub-title">商家备注</div>
			<el-row class="row-bg">
				<el-col :span="24" class="flex-center"> <span style="color: #888">备注信息：</span>{{ orderInfo?.sellerRemark || '-' }} </el-col>
			</el-row>
			<el-divider />
		</template>
		<div class="el-form-sub-title">商品信息</div>
		<template v-if="[0, 3].includes(orderInfo.orderType)">
			<el-table :data="orderInfo?.product?.skus" class="detail-table">
				<el-table-column label="商品ID" prop="productId" min-width="100"> </el-table-column>
				<el-table-column label="商品名称" prop="id" min-width="300">
					<template #default="scope">
						<div class="flex-center">
							<el-image
								class="flex-shrink"
								preview-teleported
								:preview-src-list="[scope.row.skuImage]"
								style="width: 66px; height: 66px"
								:src="scope.row.skuImage"
							/>
							<div class="ml10 text-left">
								<p class="ellipsis2 text-primary">{{ scope.row.productName }}</p>
								<p class="text-regular">规格:{{ scope.row.skuName }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="单价" prop="skuPresentPrice" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.skuPresentPrice) }}
					</template>
				</el-table-column>
				<el-table-column label="数量" prop="skuNum" min-width="100">
					<template #default="scope"> x{{ scope.row.skuNum }}{{ ['盒', '瓶', '件'][scope.row.materialUnit] || '' }} </template>
				</el-table-column>
				<el-table-column label="优惠金额" prop="concession" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.concession) }}
					</template>
				</el-table-column>
				<el-table-column label="实付金额" prop="money" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.money) }}
					</template>
				</el-table-column>
				<el-table-column label="快递名称" prop="expressName" min-width="200"> </el-table-column>
				<el-table-column label="快递单号" prop="expressNo" min-width="200"> </el-table-column>
			</el-table>
			<div>
				<p class="mt20">商品总价：￥{{ fenToYuan(orderInfo?.product?.goodsAmount) }}</p>
				<p class="mt20">运费信息：￥{{ fenToYuan(orderInfo?.product?.expressAmount) }}</p>
				<p class="mt20">买家备注：{{ orderInfo?.product?.consigneeRemark }}</p>
				<p class="mt20">
					实付款：<span class="color-danger font-bold">¥ {{ fenToYuan(orderInfo?.product?.payAmount) }}</span>
				</p>
			</div>
		</template>
		<template v-else-if="orderInfo.orderType == 1">
			<el-table :data="orderInfo?.product?.skus" class="detail-table">
				<el-table-column label="商品ID" prop="productId" min-width="100"> </el-table-column>
				<el-table-column label="商品名称" prop="id" min-width="300">
					<template #default="scope">
						<div class="flex-center">
							<el-image
								class="flex-shrink"
								preview-teleported
								:preview-src-list="[scope.row.skuImage]"
								style="width: 66px; height: 66px"
								:src="scope.row.skuImage"
							/>
							<div class="ml10 text-left">
								<p class="ellipsis2 text-primary">{{ scope.row.productName }}</p>
								<p class="text-regular">规格:{{ scope.row.skuName }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="单价" prop="skuPresentPrice" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.skuPresentPrice) }}
					</template>
				</el-table-column>
				<el-table-column label="数量" prop="productAmount" min-width="100">
					<template #default="scope"> x{{ scope.row.productAmount }}{{ ['盒', '瓶', '件'][scope.row.materialUnit] || '' }} </template>
				</el-table-column>
				<el-table-column label="优惠金额" prop="concession" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.concession) }}
					</template>
				</el-table-column>
				<el-table-column label="实付金额" prop="money" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.money) }}
					</template>
				</el-table-column>
			</el-table>
			<div>
				<p class="mt20">商品总价：￥{{ fenToYuan(orderInfo?.product?.goodsAmount) }}</p>
				<p class="mt20">买家备注：{{ orderInfo?.product?.consigneeRemark }}</p>
				<p class="mt20">
					应付款：<span class="color-danger font-bold">¥ {{ fenToYuan(orderInfo?.product?.payAmount) }}</span>
				</p>
			</div>
		</template>
		<template v-else-if="orderInfo.orderType == 2">
			<el-table :data="orderInfo?.product?.skus" class="detail-table">
				<el-table-column label="商品ID" prop="productId" min-width="100"> </el-table-column>
				<el-table-column label="商品名称" prop="id" min-width="300">
					<template #default="scope">
						<div class="flex-center">
							<el-image
								class="flex-shrink"
								style="width: 66px; height: 66px"
								preview-teleported
								:preview-src-list="[scope.row.skuImage]"
								:src="scope.row.skuImage"
							/>
							<div class="ml10 text-left">
								<p class="ellipsis2 text-primary">{{ scope.row.productName }}</p>
								<p class="text-regular">规格:{{ scope.row.skuName }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="单价" prop="skuPresentPrice" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.skuPresentPrice) }}
					</template>
				</el-table-column>
				<el-table-column label="数量" prop="productAmount" min-width="100">
					<template #default="scope"> x{{ scope.row.productAmount }}{{ ['盒', '瓶', '件'][scope.row.materialUnit] || '' }} </template>
				</el-table-column>
				<el-table-column label="优惠金额" prop="concession" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.concession) }}
					</template>
				</el-table-column>
				<el-table-column label="实付金额" prop="money" min-width="100">
					<template #default="scope">
						{{ fenToYuan(scope.row.money) }}
					</template>
				</el-table-column>
			</el-table>
			<div>
				<p class="mt20">商品总价：￥{{ fenToYuan(orderInfo?.product?.goodsAmount) }}</p>
				<p class="mt20">
					实付款：<span class="color-danger font-bold">¥ {{ fenToYuan(orderInfo?.product?.payAmount) }}</span>
				</p>
			</div>
		</template>
		<template v-else>
			<el-table :data="[{}]" class="detail-table">
				<el-table-column label="续费时间" prop="id" min-width="100">{{ orderInfo?.product?.certificate.years }}年</el-table-column>
				<el-table-column label="续费酒藏数量" prop="id" min-width="100">{{ orderInfo?.product?.certificate.skuAmount }}</el-table-column>
				<el-table-column label="实付金额" prop="money" min-width="100">
					<template #default="scope">
						{{ fenToYuan(orderInfo?.product?.payAmount) }}
					</template>
				</el-table-column>
			</el-table>
			<div>
				<p class="mt20">商品总价：￥{{ fenToYuan(orderInfo?.product?.goodsAmount) }}</p>
				<p class="mt20">
					实付款：<span class="color-danger font-bold">¥ {{ fenToYuan(orderInfo?.product?.payAmount) }}</span>
				</p>
			</div>
		</template>
		<el-divider />
		<template v-if="orderInfo?.afterMarketing">
			<div class="el-form-sub-title flex-between">
				售后信息
				<div>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refund:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							((orderInfo?.afterMarketing?.afterMarketingType == 0 && orderInfo?.afterMarketing?.afterMarketingStatus == 6) ||
								(orderInfo?.afterMarketing?.afterMarketingType == 2 && orderInfo?.afterMarketing?.afterMarketingStatus == 0))
						"
						@click="onRefund(true)"
					>
						同意退款
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refund:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							((orderInfo?.afterMarketing?.afterMarketingType == 0 && orderInfo?.afterMarketing?.afterMarketingStatus == 6) ||
								(orderInfo?.afterMarketing?.afterMarketingType == 2 && orderInfo?.afterMarketing?.afterMarketingStatus == 0))
						"
						@click="onRefund(false)"
					>
						拒绝退款
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:agree:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 0 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onRejection('return')"
					>
						已拒收同意退货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:express:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 0 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onReturn(true)"
					>
						同意退货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refuse:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 0 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onReturn(false)"
					>
						拒绝退货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:help:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							((orderInfo?.afterMarketing?.afterMarketingType == 0 && orderInfo?.afterMarketing?.afterMarketingStatus == 4) ||
								(orderInfo?.afterMarketing?.afterMarketingType == 1 && orderInfo?.afterMarketing?.afterMarketingStatus == 8))
						"
						@click="onHelpReturn()"
					>
						协助买家退货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:agree:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onRejection('exchange')"
					>
						已拒收同意换货
					</el-button>

					<!-- 申请换货，首次同意或拒绝换货 -->
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:express:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onReturn(true)"
					>
						同意换货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refuse:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 0
						"
						@click="onReturn(false)"
					>
						拒绝换货
					</el-button>

					<!-- 申请换货，商品已退回，同意或拒绝换货 -->
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refund:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 6
						"
						@click="onRefund(true)"
					>
						同意换货
					</el-button>
					<el-button
						type="primary"
						plain
						v-auth="'order:after-marketing:refund:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 6
						"
						@click="onRefund(false)"
					>
						拒绝换货
					</el-button>

					<el-button
						type="primary"
						plain
						v-auth="'order:send:invoke'"
						v-if="
							orderInfo?.afterMarketing?.canceled != 1 &&
							orderInfo?.afterMarketing?.afterMarketingType == 1 &&
							orderInfo?.afterMarketing?.afterMarketingStatus == 11
						"
						@click="onShipments"
					>
						换货发货
					</el-button>
				</div>
			</div>
			<div class="custom-step">
				<div
					:class="`step-item ${orderInfo?.afterMarketing?.step > index ? 'is-finish' : orderInfo?.afterMarketing?.step == index ? 'is-process' : ''}`"
					v-for="(item, index) in afterMarketingStep[orderInfo?.afterMarketing?.afterMarketingType || 0]"
					:key="item.index"
					:title="item.title"
				>
					<el-icon class="icon" v-if="orderInfo?.afterMarketing?.step > index"> <SuccessFilled /></el-icon>
					<span class="icon" v-else>{{ index + 1 }}</span>
					<div>
						<div class="title ellipsis1">{{ item.title }}</div>
						<div class="time ellipsis1">{{ orderInfo.afterMarketing[item.time] || '' }}</div>
					</div>
				</div>
			</div>

			<el-table class="mt20 detail-table" :data="[{ ...orderInfo?.afterMarketing, ...orderInfo?.product }]">
				<el-table-column label="申请时间" prop="requestTime" min-width="180" align="center"> </el-table-column>
				<el-table-column label="售后编号" prop="afterMarketingNo" min-width="220" align="center"> </el-table-column>
				<el-table-column label="售后商品" prop="id" min-width="200" align="center">
					<template #default="scope">
						<div class="flex-center" v-for="item in scope.row.skus" :key="item.id">
							<el-image
								:src="item.skuImage"
								class="flex-shrink"
								preview-teleported
								:preview-src-list="[item.skuImage]"
								style="width: 66px; height: 66px"
							/>
							<div class="ml10">
								<p>{{ item.productName }};{{ item.skuName }};x{{ item.skuNum }};</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="售后类型" prop="afterMarketingType" min-width="100" align="center">
					<template #default="scope">
						{{ constant.AFTERMARKETINGTYPE[scope.row.afterMarketingType] }}
					</template>
				</el-table-column>
				<el-table-column label="售后原因" prop="afterMarketingReason" min-width="200" align="center"> </el-table-column>
				<el-table-column label="退款金额" prop="afterMarketingAmount" min-width="100" align="center">
					<template #default="scope">
						{{ fenToYuan(scope.row.afterMarketingAmount) }}
					</template>
				</el-table-column>
				<el-table-column label="申请说明" prop="afterMarketingRemark" min-width="200" align="center"> </el-table-column>
				<el-table-column label="图片说明" prop="images" min-width="200" align="center">
					<template #default="scope">
						<el-image
							v-for="item in scope.row.images"
							:key="item"
							:src="item"
							preview-teleported
							:preview-src-list="scope.row.images"
							class="mr10 flex-shrink"
							style="width: 66px; height: 66px"
						/>
					</template>
				</el-table-column>
				<el-table-column label="售后状态" prop="id" min-width="200" align="center">
					<template #default="scope">
						{{ constant.AFTERMARKETINGSTATUS[scope.row.afterMarketingStatus] }}
					</template>
				</el-table-column>
			</el-table>
			<template v-if="[0, 1].includes(orderInfo?.afterMarketing?.afterMarketingType)">
				<div class="text-primary font14 font-bold mt20 mb5">退货物流</div>
				<el-row class="row-bg mt16" :gutter="20">
					<el-col :span="8"><span style="color: #888">快递公司：</span>{{ orderInfo.afterMarketing.companyName || '-' }}</el-col>
					<el-col :span="8"><span style="color: #888">快递单号：</span>{{ orderInfo.afterMarketing.expressNo || '-' }}</el-col>
					<!-- <el-col :span="8"><span style="color: #888">退货时间：</span>{{ orderInfo.sendTime || '-' }}</el-col> -->
					<el-col :span="8"><span style="color: #888">退货时间：</span>{{ orderInfo.afterMarketing.sendTime || '-' }}</el-col>
				</el-row>
			</template>
			<template v-if="orderInfo?.afterMarketing?.afterMarketingType == 1">
				<div class="text-primary font14 font-bold mt16 mb5">换货信息</div>
				<el-row class="row-bg mt16" :gutter="20">
					<el-col :span="8"><span style="color: #888">处理时间：</span>{{ orderInfo?.afterMarketing?.refundInfo?.date || '-' }}</el-col>
					<el-col :span="8"><span style="color: #888">换货说明：</span>{{ orderInfo?.afterMarketing?.refundInfo?.remark || '-' }}</el-col>
					<el-col :span="8"
						><span style="color: #888">附件信息：</span
						><image-preview
							v-if="orderInfo?.afterMarketing?.refundInfo?.image"
							:data="[orderInfo?.afterMarketing?.refundInfo?.image]"
							:button="{ type: 'primary', link: true }"
						>
							查看附件
						</image-preview>
						<span v-else>-</span></el-col
					>
					<el-col :span="8"><span style="color: #888">快递公司：</span>{{ orderInfo?.afterMarketing?.refundInfo?.companyName || '-' }}</el-col>
					<el-col :span="8"><span style="color: #888">快递单号：</span>{{ orderInfo?.afterMarketing?.refundInfo?.expressNo || '-' }}</el-col>
					<el-col :span="8"><span style="color: #888">发货时间：</span>{{ orderInfo?.afterMarketing?.refundInfo?.sendTime || '-' }}</el-col>
				</el-row>
			</template>
			<template v-if="[0, 2].includes(orderInfo?.afterMarketing?.afterMarketingType)">
				<div class="text-primary font14 font-bold mt16 mb5">退款信息</div>
				<el-row class="row-bg mt16" :gutter="20">
					<el-col :span="8"><span style="color: #888">退款金额：</span>{{ fenToYuan(orderInfo?.afterMarketing?.refundInfo?.amount) }}</el-col>
					<el-col :span="8"><span style="color: #888">退款时间：</span>{{ orderInfo?.afterMarketing?.refundInfo?.date || '-' }}</el-col>
					<el-col :span="8"><span style="color: #888">退款说明：</span>{{ orderInfo?.afterMarketing?.refundInfo?.remark || '-' }}</el-col>
					<el-col :span="8" class="mt20"
						><span style="color: #888; vertical-align: top">附件信息：</span>
						<image-preview
							v-if="orderInfo?.afterMarketing?.refundInfo?.image"
							:data="[orderInfo?.afterMarketing?.refundInfo?.image]"
							:button="{ type: 'primary', link: true }"
						>
							查看附件
						</image-preview>
						<span v-else>-</span>
					</el-col>
				</el-row>
			</template>
		</template>
		<div class="el-form-sub-title mt30" v-if="orderInfo?.history && orderInfo?.history.length > 1">协商历史</div>
		<el-table :data="orderInfo?.history" v-if="orderInfo?.history && orderInfo?.history.length > 1" class="detail-table">
			<el-table-column label="申请时间" prop="requestTime" min-width="180" align="center"> </el-table-column>
			<el-table-column label="售后编号" prop="afterMarketingNo" min-width="220" align="center"> </el-table-column>
			<el-table-column label="售后商品" prop="id" min-width="200" align="left">
				<template #default="scope">
					<div class="flex-center" v-for="item in orderInfo?.product?.skus" :key="item.id">
						<div>
							<el-tooltip class="box-item" effect="light" :content="`产品名称:${item.productName}`" placement="top">
								<div class="ellipsis2">产品名称：{{ item.productName }}</div> </el-tooltip
							>规格名称：{{ item.skuName }}<br />数量：x{{ item.skuNum }}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="退款类型" prop="afterMarketingType" min-width="100" align="center">
				<template #default="scope">
					{{ constant.AFTERMARKETINGTYPE[scope.row.afterMarketingType] }}
				</template>
			</el-table-column>
			<el-table-column label="退款原因" prop="afterMarketingReason" min-width="200" align="center"> </el-table-column>
			<el-table-column label="退款金额" prop="afterMarketingAmount" min-width="100" align="center">
				<template #default="scope">
					{{ fenToYuan(scope.row.afterMarketingAmount) }}
				</template>
			</el-table-column>
			<el-table-column label="申请说明" prop="afterMarketingRemark" min-width="200" align="center"> </el-table-column>
			<el-table-column label="图片说明" prop="images" min-width="200" align="center">
				<template #default="scope">
					<el-image
						v-for="item in scope.row.images"
						:key="item"
						preview-teleported
						:preview-src-list="scope.row.images"
						:src="item"
						class="mr10 flex-shrink"
						style="width: 66px; height: 66px"
					/>
				</template>
			</el-table-column>
			<el-table-column label="处理时间" prop="updateTime" min-width="180" align="center"> </el-table-column>
			<el-table-column label="处理结果" prop="status" min-width="200" align="center">
				<template #default="scope">
					{{ scope.row.canceled == 1 ? '售后关闭，用户主动取消' : constant.AFTERMARKETINGSTATUS[scope.row.afterMarketingStatus] }}
				</template>
			</el-table-column>
			<el-table-column label="处理说明" prop="remark" min-width="200" align="center"> </el-table-column>
		</el-table>
		<div class="el-form-sub-title mt30">操作记录</div>
		<el-table :data="orderInfo?.operations" class="detail-table">
			<el-table-column label="操作时间" prop="time" min-width="200" align="center"> </el-table-column>
			<el-table-column label="操作者" prop="operator" min-width="200" align="center"> </el-table-column>
			<el-table-column label="操作记录" prop="operation" min-width="200" align="center"> </el-table-column>
		</el-table>
		<Remark :visible="remarkVisible" :row="orderInfo" @handleClose="closeRemark"></Remark>
		<Shipments :visible="shipmentsVisible" :row="orderInfo" @handleClose="closeShipments"></Shipments>
		<Refund :visible="refundVisible" :row="orderInfo" @handleClose="closeRefund"></Refund>
		<Return :visible="returnVisible" :row="orderInfo" @handleClose="closeReturn"></Return>
		<HelpReturn :visible="helpReturnVisible" :row="orderInfo" @handleClose="closeHelpReturn"></HelpReturn>
		<ChangePrice :visible="changePriceVisible" :row="orderInfo" @handleClose="closeChangePrice"></ChangePrice>
		<Rebates :visible="rebatesVisible" :row="orderInfo" @handleClose="closeRebates"></Rebates>
	</div>
</template>

<script setup lang="tsx" name="userDetail">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { fetchOrderDetail, fetchOrderPush, fetcAgreeAfterSale, fetchOrderCancel } from '/@/api/order';
import constant from '/@/utils/constant';
import { encryptPhoneNumber, fenToYuan } from '/@/utils/commonFunction';
import ciphertext from '/@/components/ciphertext/index.vue';
import imagePreview from '/@/components/Image-preview/index.vue';
import Remark from './dialog/remark.vue';
import Shipments from './dialog/shipments.vue';
import Rebates from './dialog/rebates.vue';
import ChangePrice from './dialog/changePrice.vue';
import Refund from '/@/views/pages/fulfill/afterSale/dialog/refund.vue';
import Return from '/@/views/pages/fulfill/afterSale/dialog/return.vue';
import HelpReturn from '/@/views/pages/fulfill/afterSale/dialog/helpReturn.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import default_photo from '/@/assets/images/default_photo.jpg';

const route = useRoute();

const orderInfo = ref<any>({
	step: 0,
});
const loading = ref(false);

// 订单类型：0：B2C实物订单；1：B2C酒藏订单；2：C2C酒藏订单；3：酒藏提货订单；4：代管费订单
const orderTypeStep: any = {
	// 订单状态：0：待付款；1：待发货；2：已发货；3：已完成；4：已关闭；5：售后中
	0: [
		{ title: '创建订单', time: 'createTime', index: 0 },
		{ title: '订单支付', time: 'payTime', index: 1 },
		{ title: '商家发货', time: 'sendTime', index: 2 },
		{ title: '交易完成', time: 'finishTime', index: 3 },
	],
	1: [
		{ title: '创建订单', time: 'createTime', index: 0 },
		{ title: '订单支付', time: 'payTime', index: 1 },
		{ title: '交易完成', time: 'finishTime', index: 3 },
	],
	2: [
		{ title: '创建订单', time: 'createTime', index: 0 },
		{ title: '订单支付', time: 'payTime', index: 1 },
		{ title: '交易完成', time: 'finishTime', index: 3 },
	],
	3: [
		{ title: '创建订单', time: 'createTime', index: 0 },
		{ title: '商家发货', time: 'sendTime', index: 2 },
		{ title: '交易完成', time: 'finishTime', index: 3 },
	],
	4: [
		{ title: '创建订单', time: 'createTime', index: 0 },
		{ title: '订单支付', time: 'payTime', index: 1 },
		{ title: '交易完成', time: 'finishTime', index: 3 },
	],
};

const afterMarketingStep: any = {
	// 售后类型 0-退货退款 1-换货 2-仅退款
	/**
	 * 售后状态
	 * todo 退货后商家拒绝退款是不是应该重新把原货物原路返回
	 * todo 已经申请过售后的订单是否接受二次售后申请？比如换货后仍不满意
	 * 0-用户已申请，待商家处理
	 * 1-商家同意退款，退款成功
	 * 2-商家拒绝退款，退款关闭
	 * 3-商家同意退款，退款成功（部分退款）
	 * 4-商家同意退货退款申请，待买家发货
	 * 5-商家拒绝退货申请，退货关闭
	 * 6-用户已经退货，待商家处理
	 * 7-仓库已经收货，待商家处理
	 * 8-商家同意换货申请，待买家退货
	 * 9-商家拒绝换货申请，退货关闭
	 * 10-商家拒绝换货，换货关闭
	 * 11-商家同意换货，待商家发货
	 * 12-商家同意换货，已发货，等待用户收货
	 * 13-用户收货，换货完成
	 * 14-售后关闭，用户主动取消
	 * 15-售后关闭，超时自动关闭
	 * */

	0: [
		{ title: '买家发起退款', time: 'requestTime', index: [0, 5] },
		{ title: '商家同意退货', time: 'applyTime', index: [4] },
		{ title: '买家退货', time: 'sendTime', index: [6, 7, 2] },
		{ title: '商家同意退款', time: 'finishTime', index: [1, 3] },
	],
	1: [
		{ title: '买家发起换货', time: 'requestTime', index: [0, 9] },
		{ title: '商家同意换货', time: 'applyTime', index: [8] },
		{ title: '买家退货', time: 'sendTime', index: [6, 7, 2] },
		{ title: '商家同意换货', time: 'finishTime', index: [11, 12, 13] },
	],
	2: [
		{ title: '买家发起退款', time: 'requestTime', index: [0, 2] },
		{ title: '商家同意退款', time: 'finishTime', index: [1, 3] },
	],
};

const remarkVisible = ref(false);

const refundVisible = ref(false);

const returnVisible = ref(false);

const helpReturnVisible = ref(false);

const shipmentsVisible = ref(false);

const changePriceVisible = ref(false);

const rebatesVisible = ref(false);

// 商家备注
const onRemark = () => {
	remarkVisible.value = true;
};

const closeRemark = (success: boolean) => {
	remarkVisible.value = false;
	if (success) {
		initData();
	}
};

// 推送履约
const onPush = () => {
	ElMessageBox.confirm('确认推送履约？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		beforeClose: async (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				// 在此处调用方法，方法完成后需使用 done() 关闭弹框
				const res = await fetchOrderPush({ id: route.params.id });
				if (res.code === 200) {
					ElMessage.success('推送履约成功');
					initData();
					done();
				}
			} else {
				done();
			}
		},
	});
};

// 订单发货
const onShipments = (edit: any) => {
	shipmentsVisible.value = true;
	orderInfo.value.edit = edit === true ? true : false;
};

const closeShipments = (success: boolean) => {
	shipmentsVisible.value = false;
	if (success) {
		initData();
	}
};

const onRefund = (pass: any) => {
	orderInfo.value.pass = pass;
	refundVisible.value = true;
};

const closeRefund = (success: boolean) => {
	refundVisible.value = false;
	delete orderInfo.value.pass;
	if (success) {
		initData();
	}
};

const onReturn = (pass: any) => {
	orderInfo.value.pass = pass;
	returnVisible.value = true;
};

const closeReturn = (success: boolean) => {
	delete orderInfo.value.pass;
	returnVisible.value = false;
	if (success) {
		initData();
	}
};

const onHelpReturn = () => {
	helpReturnVisible.value = true;
};

const closeHelpReturn = (success: boolean) => {
	helpReturnVisible.value = false;
	if (success) {
		initData();
	}
};

// 已拒收同意退货/换货
const onRejection = (type: any) => {
	const info: any = {
		return: '是否确认用户已拒收并同意退货?',
		exchange: '是否确认用户已拒收并同意换货?',
	};
	ElMessageBox.confirm(info[type], '温馨提示', { type: 'warning' }).then(() => {
		fetcAgreeAfterSale({
			id: orderInfo.value.afterMarketing.id,
		}).then(() => {
			ElMessage.success('操作成功');
			initData();
		});
	});
};

// 取消订单
const cancelOrder = () => {
	ElMessageBox.confirm('确认取消订单？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const res = await fetchOrderCancel({ id: route.params.id });
			if (res.code === 200) {
				ElMessage.success('取消订单成功');
				initData();
			}
		})
		.catch(() => {});
};
// 部分退款
const onRefundPart = () => {
	rebatesVisible.value = true;
};

const closeRebates = (success: boolean) => {
	rebatesVisible.value = false;
	if (success) {
		initData();
	}
};

// 订单改价
const onChangePrice = () => {
	changePriceVisible.value = true;
};

const closeChangePrice = (success: boolean) => {
	changePriceVisible.value = false;
	if (success) {
		initData();
	}
};

const initData = async () => {
	const id = route.params.id;
	if (!id) return;
	const res = await fetchOrderDetail({ id });
	if (res.code === 200) {
		const { data } = res;
		data.step = orderTypeStep[data.orderType].filter((item: any) => item.index <= data.orderStatus).length - 1;
		if (data['afterMarketing']) {
			data['afterMarketing'].step = afterMarketingStep[data?.afterMarketing?.afterMarketingType]?.findIndex((item: any) =>
				item.index.includes(data?.afterMarketing?.afterMarketingStatus)
			);
		}
		orderInfo.value = data;
	}
};

onMounted(async () => {
	loading.value = true;
	initData();
	loading.value = false;
});
</script>

<style lang="scss">
.user-detail-wrapper {
	.custom-step {
		display: flex;
		align-items: center;
		overflow: hidden;
		.step-item {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #f2f5f8;
			color: #a1aab3;
			font-size: 14px;
			height: 40px;
			padding-left: 20px;
			font-weight: 500;
			position: relative;
			padding-right: 10px;
			&:not(:first-child) {
				padding-left: 30px;
			}
			&:last-child {
				padding-right: 25px;
			}
			&:not(:last-child)::after {
				content: '';
				width: 25px;
				height: 22px;
				display: inline-block;
				border: 3px solid #fff;
				border-bottom-color: transparent;
				border-left-color: transparent;
				-webkit-transform: rotate(55deg) skew(20deg);
				-moz-transform: rotate(55deg) skew(20deg);
				-o-transform: rotate(55deg) skew(20deg);
				position: absolute;
				right: -14px;
				z-index: 2;
				background-color: #f2f5f8;
			}
			.icon {
				width: 24px;
				height: 24px;
				background: #ffffff;
				border-radius: 50%;
				margin-right: 8px;
				text-align: center;
				line-height: 24px;
			}
			&.is-finish {
				color: #fff;
				background-color: #0059b3;
				.icon {
					background-color: #0059b3;
					font-size: 24px;
				}
				&:not(:last-child)::after {
					background-color: #0059b3;
				}
			}
			&.is-process {
				background-color: #0059b3;
				color: #fff;
				.icon {
					color: #0059b3;
				}
				&:not(:last-child)::after {
					background-color: #0059b3;
				}
			}
		}
	}
}
.detail-table {
	thead th.el-table__cell {
		background-color: #f2f5f8;
		color: #333333;
		padding: 15px 0;
	}
}
</style>
